<template>
    <div ref="artList" @scroll="onScroll" class="article-list">
        <!-- 导航栏 -->
        <van-nav-bar>
            <!-- 自定义左侧 -->
            <template #left>
                <div class="logo"></div>
            </template>
            <!-- 自定义右侧 -->
            <template #right>
                <van-button @click="$router.push('/search')" round icon="search" type="primary">搜索</van-button>
            </template>
        </van-nav-bar>
        <!-- 频道栏 -->
        <van-tabs v-model="tabIndex">
            <van-tab v-for="item in ownChannels" :key="item.id" :title="item.name">
                <!-- 新闻列表 -->
                <article-list :channel_id="item.id"></article-list>
            </van-tab>
            <div class="icon-box" @click="showChannel = true">
                <van-icon name="wap-nav" />
            </div>
        </van-tabs>
        <!-- 频道管理的sheet -->
        <van-action-sheet v-model="showChannel" title="频道管理">
            <!-- 到时候这里放频道管理的组件 -->
            <!-- <channel @close="showChannel = false"  @input="tabIndex = $event" :value="tabIndex" :allChannels="allChannels" :ownList="ownChannels" /> -->
            <!-- 父传子用的是 `value` ，子传父用的是 `input`，所以可以简写为 `v-model` -->
            <channel @close="showChannel = false" v-model="tabIndex" :allChannels="allChannels"
                :ownList="ownChannels" />
        </van-action-sheet>
    </div>
</template>

<script>
    import {
        resetChannelAPI
    } from '@/api'

    import {
        ownChannelsAPI
    } from '@/api'
    import {
        allChannelsAPI
    } from '@/api'
    import articleList from './articleList.vue'
    import Channel from './channel.vue';
    export default {
        components: {
            articleList,
            Channel
        },

        props: {},
        data() {
            return {
                // 自己的频道
                ownChannels: [],
                allChannels: [],
                showChannel: false,
                tabIndex: 0,
                scrollTop: 0
            };
        },
        computed: {},
        watch: {
            async ownChannels() {
                //页面一打开就会调用一次
                // 因为页面一打开从没数据到有数据，这次是没必要发请求给服务器的
                // console.log('数组改变了');
                if (this.showChannel) {
                    // 判断有没有登录
                    if (this.$store.state.tokenObj.token) {
                        // 拿到修改后我的频道数组，提取出一个新数组
                        // 新数组长度要跟他一致，只是提取一个id有seq的数组
                        const channels = this.ownChannels.map((v, index) => {
                            return {
                                id: v.id,
                                seq: index + 1, //当前频道的序号
                            }
                        })
                        // 发请求
                        let res = await resetChannelAPI({
                            channels
                        });
                    } else {
                        // 存本地
                        window.localStorage.setItem("channels", JSON.stringify(this.ownChannels))
                    }
                }
            }
        },
        async created() {
            const channels = JSON.parse(window.localStorage.getItem(this.LOCAL_KEY))
            // 要么登录了，要么就是没登录但是本地存储没值，就发请求
            if (this.$store.state.tokenObj.token || !channels) {
                // 获取用户自己的频道
                let res1 = await ownChannelsAPI()
                this.ownChannels = res1.data.data.channels
            } else {
                // 能来到这肯定是既没登录，而且本地存储有值
                // 本地存储有数据直接赋值给我的频道数组
                this.ownChannels = channels;
            }



            // 获取所有频道
            let res = await allChannelsAPI()
            this.allChannels = res.data.data.channels
        },
        mounted() {},
        methods: {
            // 滚动条触发的事件
            onScroll(){
                // 记录滚动条的位置
                this.scrollTop = this.$refs.articleList.scrollTop
            }
        },
        activated(){
            // 之前记录多少距离，这里就给他多少
            this.$refs.articleList.scrollTop = this.scrollTop
        }
    }
</script>
<style scoped lang="less">
    .van-nav-bar {
        .logo {
            width: 120px;
            height: 100%;
            background: url(~@/assets/logo.png) no-repeat center / contain;
        }

        .van-button {
            width: 100px;
            height: 30px;
            background-color: rgba(255, 255, 255, 0.3);
            border: none;

            .van-icon-search {
                color: #fff;
            }
        }
    }

    // 频道栏的布局
    .van-tabs {
        ::v-deep .van-tabs__wrap {
            width: 345px;
        }

        .icon-box {
            position: absolute;
            right: 0;
            top: 5px;
            background-color: #fff;

            .van-icon {
                font-size: 30px;
            }
        }
    }
</style>